//系统配置-角色管理-分配操作
App.util.ns('Admin.Access.Role');
Admin.Access.Role.OperationManage = function(dataTable){
    var printer = {
        frame: $([
            '<div class="tab-left">',
            '    <ul class="tab-bar">',
            '    </ul>',
            '    <div class="tab-content padding-sm">',
            '   </div>',
            '</div>'
        ].join('')),
        flush: function(data){
            var groups = this.getGroupedData(data);
            var barContainer = this.frame.find('.tab-bar');
            barContainer.children().each(function(){
                $(this).remove();
            });
            var contentContainer = this.frame.find('.tab-content');
            contentContainer.children().each(function(){
                $(this).remove();
            });
            for(var name in groups){
                this.getBar(name).appendTo(barContainer);
                this.getContent(groups[name]).appendTo(contentContainer);
            }
            barContainer.find('li').each(function(){
                $(this).click(function(){
                    barContainer.find('li').removeClass('active');
                    $(this).addClass('active');
                    contentContainer.find('.tab-pane').removeClass('active').removeClass('in');
                    var index = $(this).index();
                    contentContainer.find('.tab-pane').each(function(){
                        if($(this).index() === index){
                            $(this).addClass('active').addClass('in');
                        }
                    });
                });
            });
            barContainer.find('li').first().click();
        },
        getBar: function(name){
            return $([
                '<li>',
                                                '	<a href="javascript:void(0);">'+name+'</a>',
                                                '</li>'
            ].join(''));
        },
        getContent: function(groups){
            var container = this.getContentContainer();
            for(var i in groups){
                var item = this.getContentItem(groups[i]);
                item.appendTo(container);
            }
            //全选
            container.find('.select-all-btn').click(function(){
                var selected = $(this).prop('checked');
                container.find('.operation-group-ids').prop('checked', selected).change();
                container.find('.operation-ids').prop('checked', selected).change();
            });
            //全部展开
            container.find('.items-show-all-btn').click(function(){
                $(this).hide();
                container.find('.items-hide-all-btn').show();
                container.find('.items-show-btn').click();
            });
            //全部收起
            container.find('.items-hide-all-btn').click(function(){
                $(this).hide();
                container.find('.items-show-all-btn').show();
                container.find('.items-hide-btn').click();
            });
            return container;
        },
        getContentContainer: function(){
            return $([
                '<div class="tab-pane fade">',
                '   <div class="panel panel-default fadeInDown" style="margin-bottom:10px;">',
                '       <div class="panel-heading">',
                '           <div class="row">',
                '               <div class="col-sm-6">',
                '                   <label class="label-checkbox pull-left" style="margin:0;font-weight:normal;">',
                '                       <input type="checkbox" class="select-all-btn" style="margin:0;margin-right:5px;">',
                '                       <span class="custom-checkbox">全选</span>',
                '                   </label>',
                '               </div>',
                '               <div class="col-sm-6 text-right">',
                '                   <span class="items-show-all-btn" style="cursor: pointer;display:none;">全部展开 <i class="fa fa-chevron-down"></i></span>',
                '                   <span class="items-hide-all-btn" style="cursor: pointer;">全部收起 <i class="fa fa-chevron-up"></i></span>',
                '               </div>',
                '           </div>',
                '       </div>',
                '   </div>',
                '<div>'
            ].join(''));
        },
        getContentItem: function(group){
            var item = $([
                '<div class="panel panel-default fadeInDown" style="margin-bottom:10px;">',
                '	<div class="panel-heading">',
                '		<div class="row">',
                '			<div class="col-sm-6">',
                '				<label class="label-checkbox pull-left" style="margin:0;font-weight:normal;">',
                '					<input type="checkbox" class="group-select-all-btn operation-group-ids" value="'+group.group_id+'" style="margin:0;margin-right:2px;">',
                '                   <span class="custom-checkbox">'+group.name+'(<span class="selected-count">0</span>/<span class="total-count">0</span>)</span>',
                '				</label>',
                '			</div>',
                '			<div class="col-sm-6 text-right">',
                '				<span class="items-show-btn" style="cursor: pointer;display:none;"><i class="fa fa-chevron-down"></i></span>',
                '				<span class="items-hide-btn" style="cursor: pointer;"><i class="fa fa-chevron-up"></i></span>',
                '			</div>',
                '		</div>',
                '	</div>',
                '	<div class="panel-body"><div>',
                '<div>'
            ].join(''));
            //条目
            var colNum = group.type+'' === 2 ? 4 : 3;
            for(var i in group.operations){
                var operation = group.operations[i];
                var itemDiv = $([
                    '<div class="col-md-'+(12/colNum)+' no-padding">',
                    '   <label class="label-checkbox inline" style="margin:0;font-weight:normal;">',
                    '       <input type="checkbox" data-group-type="'+group.type+'" data-group-id="'+group.group_id+'" class="operation-ids" value="'+operation.key+'" style="margin:0;margin-right:2px;">',
                    '       <span class="custom-checkbox">'+operation.name+'</span></label>',
                    '   </label>',
                    '</div>'
                ].join(''));
                if(operation.selected){
                    itemDiv.find('input').prop('checked', true);
                }
                itemDiv.appendTo(item.find('.panel-body'));
            }
            //总数
            item.find('.total-count').text(item.find('.operation-ids').length);
            var getSelectedCount = function(){
                var selectedCount = 0;
                item.find('.operation-ids').each(function(){
                    if($(this).prop('checked')){
                        selectedCount++;
                    }
                });
                return selectedCount;
            };
            //已选
            item.find('.selected-count').text(getSelectedCount());
            //显示
            item.find('.items-show-btn').click(function(){
                $(this).hide();
                item.find('.items-hide-btn').show();
                item.find('.panel-body').show();
            });
            //隐藏
            item.find('.items-hide-btn').click(function(){
                $(this).hide();
                item.find('.items-show-btn').show();
                item.find('.panel-body').hide();
            });
            //监听多选框
            item.find('.operation-ids').change(function(){
                item.find('.selected-count').text(getSelectedCount());
            });
            //全选
            item.find('.group-select-all-btn').change(function(){
                var selected = $(this).prop('checked');
                item.find('.operation-ids').prop('checked', selected).change();
            });
            return item;
        },
        getGroupedData: function(data){
            var groups = {};
            for(var i in data){
                var item = data[i];
                var names = item.name.split('-');
                var name = names[0];
                if(!groups[name]){
                    groups[name] = [];
                }
                item.name = names.splice(1, names.length).join('-');
                groups[name].push(item);
            }
            return groups;
        },
        getData: function(){
            var selectedOperationsRaw = [];
            var selectedDataOperationsRaw = {};
            this.frame.find('.operation-ids:checked').each(function(){
                var groupType = $(this).attr('data-group-type');
                var groupId = $(this).attr('data-group-id');
                if(groupType+'' === '1'){
                    selectedOperationsRaw.push($(this).attr('value'));
                }else if(groupType+'' === '2'){
                    if(!selectedDataOperationsRaw['_'+groupId]){
                        selectedDataOperationsRaw['_'+groupId] = [$(this).attr('value')];
                    }else{
                        selectedDataOperationsRaw['_'+groupId].push($(this).attr('value'));
                    }
                }
            });
            var selectedOperationIds = selectedOperationsRaw.join(',');
            var selectedDataOperationsArr = [];
            for(var i in selectedDataOperationsRaw){
                selectedDataOperationsArr.push(i+':'+selectedDataOperationsRaw[i].join(','));
            }
            var selectedDataIds = selectedDataOperationsArr.join('|');
            return {
                operationIds : selectedOperationIds,
                dataIds : selectedDataIds
            };
        }
    };
    var win = new App.Win({name: 'operation_manage'});
    win.printer = printer;
    win.frame.find('.container').css({'padding-left': 0, 'padding-right':0});
    win.setTitle('分配操作');
    win.setContent(printer.frame);
    win.contentContainer.append('<input type="hidden" name="role_id">');
    //设置按钮
    win.setBtns([(function(){
        var cancelBtn = $('<a class="btn btn-danger btn-xs m-right-sm">取消</a>');
        cancelBtn.click(function(){
            win.hide();
        });
        return cancelBtn;
    })(), (function(){
        var saveBtn = $('<a class="btn btn-success btn-xs">保存</a>');
        saveBtn.click(function(){
            var data = printer.getData();
            dataTable.postData({
                url: 'changeOperations',
                alert: '保存成功！',
                reload: false,
                data: {
                    role_id: win.contentContainer.find('input[name="role_id"]').val(),
                    operation_ids: data.operationIds,
                    data_ids: data.dataIds
                },
                after: function(){
                    win.hide();
                }
            });
        });
        return saveBtn;
    })()]);
    win.hide();
    return win;
};